<template>
  <div>
    <!--新增表单-->
    <FormPanel ref="formList" :list="formList" formType="add" :cols="3" :labelWidth="105" :isSubmitBtn="false" @formChange="formChange" />

    <BreakSpace label="客户关怀筛选" :containerStyle="{ marginBottom: '10px' }"></BreakSpace>
    <TopFilter :list="searchList" :cols="3" :labelWidth="'90'" @filterChange="changeHandle"> </TopFilter>
    <FilterTable
      ref="filterList"
      :fetchapi="fetchApi"
      :columns="columns"
      :params="fetchParams"
      :dataSource="careList"
      :datakey="'rows'"
      :isPagination="true"
      :onColumnsChange="filterList => (this.filterList = filterList)"
      :onSyncTableData="syncData"
    >
    </FilterTable>
    <div
      :style="{
        position: 'absolute',
        left: 0,
        bottom: 0,
        right: 0,
        zIndex: 9,
        borderTop: '1px solid #e9e9e9',
        padding: '10px 20px',
        background: '#fff',
        textAlign: 'right'
      }"
    >
      <el-button type="primary" :loading="confirmBtnLoading" @click="save()">保存</el-button>
      <el-button @click="back">返回</el-button>
    </div>
  </div>
</template>
<script>
import { dictionary } from '@/utils/dictMixin';
import { queryOVinfo, save } from '@/api/customerRepair/customerCare/maintenanceRemind';
// import { seriesSelect, modelSelect } from '@/api/retail/vehicleResourceQuery';

export default {
  mixins: [dictionary],
  data() {
    this.saveData = null;
    return {
      // 表单绑定
      formList: this.createFormList(),
      searchList: this.createTopFilterList(),
      columns: this.createcolumns(),
      fetchParams: { xhrAbort: true },
      fetchApi: queryOVinfo,
      careList: [],
      seriesList: [], // 车系数据
      modelList: [] // 车型的数据
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      // this.querySeries();
    },
    createFormList() {
      return [
        {
          type: 'INPUT',
          label: '关怀名称',
          fieldName: 'careName',
          rules: [{ required: true, message: '请输入关怀名称', trigger: 'blur' }]
        },
        {
          type: 'INPUT',
          label: '关怀编码',
          fieldName: 'careCode',
          rules: [{ required: true, message: '请输入关怀编码', trigger: 'blur' }]
        },
        {
          type: 'DATE',
          label: '关怀建立时间',
          fieldName: 'careDate',
          placeholder: '请选择',
          valueFormat: 'yyyy-MM-dd',
          initialValue: ''
        }
      ];
    },
    createTopFilterList() {
      return [
        {
          type: 'SELECT',
          label: '客户类型',
          initialValue: 'buying',
          fieldName: 'type',
          placeholder: '请选择',
          selfCols: 3,
          disabled: true,
          itemList: [
            { text: '潜在客户', value: 'potential' },
            { text: '购车客户', value: 'buying' }
          ],
          change: type => this.changeType(type)
        },
        {
          type: 'INPUT',
          label: '客户名称',
          fieldName: 'ownerName',
          hidden: false
        },
        {
          type: 'INPUT',
          label: '客户电话',
          fieldName: 'phone',
          hidden: false
        },
        {
          type: 'INPUT',
          label: '报价',
          fieldName: '1',
          hidden: true // 潜客部分字段没有确定所以全部隐藏了  需要时改为false和下面显隐的事件逻辑要对应字段
        },
        {
          type: 'SELECT',
          label: 'ADC顾问',
          fieldName: '2',
          disabled: true,
          itemList: this.createDictList('8026'),
          hidden: true
        },
        {
          type: 'SELECT',
          label: '销售顾问',
          fieldName: '3',
          disabled: true,
          itemList: this.createDictList('8026'),
          hidden: true
        },
        {
          type: 'INPUT',
          label: '接待时长',
          fieldName: '4',
          hidden: true
        },
        {
          type: 'SELECT',
          label: '车系',
          fieldName: '5',
          disabled: true,
          itemList: this.createDictList('8026'),
          hidden: true
        },
        {
          type: 'SELECT',
          label: '意向车型',
          fieldName: '6',
          disabled: true,
          itemList: this.createDictList('8026'),
          hidden: true
        },
        {
          type: 'SELECT',
          label: '进店类型',
          fieldName: '7',
          disabled: true,
          itemList: this.createDictList('8026'),
          hidden: true
        },
        {
          type: 'CHECKBOX',
          hidden: true,
          labelOptions: {
            type: 'CHECKBOX',
            fieldName: '8',
            disabled: false,
            hidden: true,
            options: {
              trueValue: 10041001,
              falseValue: 10041002
            }
          },
          fieldName: '8',
          render: props => {
            return <span>是否乘驾试驾</span>;
          }
        },
        {
          type: 'RANGE_DATE',
          label: '预计购买日期',
          valueFormat: 'yyyy-MM-dd',
          selfCols: 2,
          hidden: true,
          fieldName: '9|10'
        },
        {
          type: 'RANGE_INPUT',
          label: '进站次数',
          fieldName: 'historyRepairTimesB|historyRepairTimesE',
          hidden: true
        },
        {
          type: 'SELECT',
          label: '车系',
          fieldName: 'seriesCode',
          hidden: true,
          itemList: [],
          change: val => {
            if (val != undefined && val != '' && val != null) {
              this.searchList.find(x => x.fieldName === 'modelCode').disabled = false;
              this.searchList.find(x => x.fieldName === 'modelCode').initialValue = null;
              // this.queryModel(val);
            } else {
              this.searchList.find(x => x.fieldName === 'modelCode').disabled = true;
              this.searchList.find(x => x.fieldName === 'modelCode').initialValue = null;
            }
          }
        },
        {
          type: 'SELECT',
          label: '车型',
          fieldName: 'modelCode',
          disabled: true,
          hidden: true,
          itemList: []
        },
        {
          type: 'RANGE_INPUT',
          label: '累计里程',
          fieldName: 'totalChangeMileageB|totalChangeMileageE',
          hidden: true
        }
        // {
        //   type: 'RANGE_INPUT',
        //   label: '车龄',
        //   fieldName: 'vehicleAge'
        // }
      ];
    },
    createcolumns() {
      return [
        {
          title: '客户编号',
          dataIndex: 'ownerNo',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '客户名称',
          dataIndex: 'cusName',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '客户手机',
          dataIndex: 'mobile',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '客户电话',
          dataIndex: 'phone',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '性别',
          dataIndex: 'gender',
          sorter: true,
          filter: true,
          filterType: 'input',
          hidden: true
        },
        {
          title: '联系人名称',
          dataIndex: 'linkMan',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '联系人手机',
          dataIndex: 'linkMobile',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '联系人电话',
          dataIndex: 'linkTel',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '车系',
          dataIndex: 'series',
          sorter: true,
          filter: true,
          filterType: 'input',
          hidden: true
        },
        {
          title: 'VIN',
          dataIndex: 'vin',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '车牌号',
          dataIndex: 'license',
          sorter: true,
          filter: true,
          filterType: 'input'
        }
      ];
    },
    /** 订单类型监听 */
    changeType(type) {
      if (type == 'potential') {
        // 显示隐藏
        // this.searchList.find(item => item.fieldName === 'operatorCode').hidden = true;
        // this.searchList.find(item => item.fieldName === 'brand').hidden = true;
        this.searchList.find(item => item.fieldName === 'seriesCode').hidden = true;
        this.searchList.find(item => item.fieldName === 'modelCode').hidden = true;
        this.searchList.find(item => item.fieldName === 'totalChangeMileageB|totalChangeMileageE').hidden = true;

        //  this.searchList.find(item => item.fieldName === 'totalChangeMileageB').hidden = true;
        // this.searchList.find(item => item.fieldName === 'totalChangeMileageE').hidden = true;
      } else if (type == 'buying') {
        // 显示隐藏
        // this.searchList.find(item => item.fieldName === 'operatorCode').hidden = false;
        // this.searchList.find(item => item.fieldName === 'brand').hidden = false;
        this.searchList.find(item => item.fieldName === 'seriesCode').hidden = false;
        this.searchList.find(item => item.fieldName === 'modelCode').hidden = false;
        this.searchList.find(item => item.fieldName === 'totalChangeMileageB|totalChangeMileageE').hidden = false;

        //  this.searchList.find(item => item.fieldName === 'totalChangeMileageB').hidden = false;
        // this.searchList.find(item => item.fieldName === 'totalChangeMileageE').hidden = false;
        // this.searchList.find(item => item.fieldName === 'totalChangeMileageB|totalChangeMileageE').hidden = false;
        // this.searchList.find(item => item.fieldName === 'operatorCode').hidden = true;
      }
    },
    changeHandle(val) {
      this.fetchParams = Object.assign({}, val, { xhrAbort: false });
    },
    /** 表单提交方法*/
    formChange(val) {
      this.saveData = val;
    },
    syncData(val) {
      this.careList = val;
    },
    /** 返回按钮方法 */
    back(type) {
      this.$emit('returnAdd', { type: type });
    },
    // 查询所有车型(供table使用) 模块迁移车型车系引用售前注释掉 需后续修改 hxj 2020/10/27
    // async queryModel(seriesCode) {
    //   const res = await modelSelect({ seriesCode: seriesCode });
    //   this.modelList = res.data.map(x => ({ text: x.modelName, value: x.modelCode }));
    //   this.searchList.find(x => x.fieldName === 'modelCode').itemList = this.modelList;
    // },
    // 查询所有车系(供table使用)
    // async querySeries() {
    //   const res = await seriesSelect();
    //   this.seriesList = res.data.map(x => ({ text: x.seriesName, value: x.seriesCode }));
    //   this.searchList.find(x => x.fieldName === 'seriesCode').itemList = this.seriesList;
    // },
    /** 保存按钮方法 */
    async save() {
      this.$refs.formList.SUBMIT_FORM();
      if (this.saveData) {
        let res = {};
        this.formList.forEach(x => {
          if (x.initialValue) {
            let resd = JSON.parse(`{"${x.fieldName}":"${x.initialValue}"}`);
            res = Object.assign(res, resd);
          }
        });
        let obj = Object.assign(res, { careList: this.careList });
        await save(obj).then(res => {
          if (res.resultCode == 200) {
            this.back('refresh');
            return this.$notify.success({ title: '提示信息', message: '保存成功！' });
          }
        });
      }
    }
  }
};
</script>
